<template>
    <div class="sayContainer">
        <van-swipe :autoplay="3000" class="my-swipe">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <div class="backImg" :style="backUrl(index)"></div>
            </van-swipe-item>
        </van-swipe>
        <div class="postContainer">
            <ul class="postContent">
                <li v-for="(post,index) in posts" :key="index">
                    <div class="post" @click="goSay(index)">
                        <img class="postImg" :src="backImg(post)" alt="">
                        <p class="share">{{ post.content }}</p>
                        <div class="user">
                            <div class="info">
                                <div class="head"></div>
                                <p class="name">{{ post.name }}</p>
                            </div>
                            <div class="heart">
                                <div class="heartImg" v-if="post.isShow" @click="ifShow(index)"></div>
                                <div class="heartFillImg" v-if="!post.isShow" @click="ifShow(index)"></div>
                                <p class="num">{{ post.support }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="postContent">
                <li v-for="post in secondPosts" :key="post.id">
                    <div class="post">
                        <img class="postImg" :src="secondBackImg(post)" alt="">
                        <p class="share">{{ post.share }}</p>
                        <div class="user">
                            <div class="info">
                                <div class="head"></div>
                                <p class="name">{{ post.name }}</p>
                            </div>
                            <div class="heart">
                                <div class="heartImg" v-if="post.isShow" @click="ifSecondShow(index)"></div>
                                <div class="heartFillImg" v-if="!post.isShow" @click="ifSecondShow(index)"></div>
                                <p class="num">{{ post.support }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { Swipe, SwipeItem } from 'vant';
    import { Image as VanImage } from 'vant';
    import axios from 'axios';
    export default {
        name:'forumSay',
        components:{
            'van-swipe':Swipe,
            'van-swipe-item':SwipeItem,
            'van-image':VanImage
        },
        async beforeRouteEnter(to,from,next){
            await next((vm)=>{
                axios({
                    url:'http://localhost:8080/polycystic/forum/list',
                    method:'get',
                    headers:{
                        token:localStorage.getItem('jwt')
                    }
                }).then(res=>{
                    vm.posts=res.data.data.forumList
                    console.log(vm.posts);
                    vm.userSupportList=res.data.data.userSupportList
                    for(let i=0;i<vm.posts.length;i++){
                        vm.posts[i].isShow=true
                        for(let j=0;j<vm.userSupportList.length;j++){
                            if(vm.posts[i].id===vm.userSupportList[j].forumId){
                                vm.posts[i].isShow=false
                            }
                        }
                    }
                })
            })
        },
        data() {
            return {
                images: [ 
                    'https://sky-take-out-xyu.oss-cn-hangzhou.aliyuncs.com/20240530193006.jpg',
                    'https://sky-take-out-xyu.oss-cn-hangzhou.aliyuncs.com/XGVFWWKS%28SLEL1HK%5B%40%6089FV_tmb.png',
                ],
                posts:[
                    {id:'001',share:'想问一些多囊的问题',name:'麦乐鸡',num:1334,index:0,isShow:true},
                    {id:'002',share:'咕噜咕噜咕噜咕噜咕噜咕噜',name:'hhhin',num:33,index:1,isShow:true},
                    {id:'003',share:'经验分享',name:'hhhin',num:999,index:2,isShow:true},
                    {id:'004',share:'经验分享',name:'hhhin',num:33,index:3,isShow:true},
                ],
                secondPosts:[
                    {id:'001',share:'云南之旅',name:'王子虚',support:200,index:0,isShow:true},
                    {id:'002',share:'彩云之南',name:'gugu',support:500,index:1,isShow:true},
                    {id:'003',share:'hahahahahaha',name:'xixi',support:1000,index:2,isShow:true},
                    {id:'004',share:'篝火晚会',name:'xiaoxiao',support:9000,index:3,isShow:true},
                ],
                userSupportList:[],
                isShow:true
            };
        },
        computed:{
            backImg(){
                return (post) =>{
                    return require(`../assets/img/example/001.jpg`)
                }
            },
            secondBackImg(){
                return(post)=>{
                    return require(`../assets/img/secondExample/${post.id}.jpg`)
                }
            }
        },
        created(){
            axios({
                url:'http://localhost:8080/polycystic/forum/list',
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.posts=res.data.data.forumList
                this.userSupportList=res.data.data.userSupportList
                for(let i=0;i<this.posts.length;i++){
                    this.posts[i].isShow=true
                    for(let j=0;j<this.userSupportList.length;j++){
                        if(this.posts[i].id===this.userSupportList[j].forumId){
                            this.posts[i].isShow=false
                        }
                    }
                }
            })
        },
        methods:{
            goSay(index){
                this.$router.push({
                    name:'commentSay',
                    query:{
                        id:this.posts[index].id
                    }
                })
            },
            backUrl(index){
                return `backgroundImage:url(${this.images[index]})`
            },
            ifShow(index){
                this.posts[index].isShow=!this.posts[index].isShow;
                if(this.posts[index].isShow===false){
                    this.posts[index].support++
                }
                else if(this.posts[index].isShow===true){
                    this.posts[index].support--
                }
                axios({
                    url:`http://localhost:8080/polycystic/forum/support?id=${this.posts[index].id}&support=${this.posts[index].support}`,
                    method:'get',
                    headers:{
                        token:localStorage.getItem('jwt')
                    }
                })
            },
            ifSecondShow(index){
                this.secondPosts[index].isShow=!this.secondPosts[index].isShow;
                if(this.secondPosts[index].isShow===false){
                    this.secondPosts[index].support++
                }
                else if(this.secondPosts[index].isShow===true){
                    this.secondPosts[index].support--
                }
            }
        }
    }
</script>

<style scoped>
    .sayContainer{
        width: 100%;
        overflow-y:scroll;
        scrollbar-width: none; 
    }
    .my-swipe{
        margin-top: .2rem;
        margin-left: .32rem;
        width: 6.86rem;
        height: 110px;
        border-radius: .3rem;
    }
    .postContainer{
        margin-top: .4rem;
        margin-left: .12rem;
        width: 100vw;
    }
    .postContent{
        width:3.33rem;
        float: left;
        margin-left: .2rem;
        padding-bottom: 50px;
    }
    .post{
        width: 3.33rem;
        margin-bottom: .6rem;
        float: left;
    }
    .postImg{
        width: 100%;
        border-radius: .2rem;
    }
    .share{
        width: 100%;
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .32rem;
        margin-top: .2rem;
        margin-bottom: .2rem;
    }
    .user{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .info{
        display: flex;
        align-items: end;
    }
    .head{
        width: .4rem;
        height: .4rem;
        border: 1px solid #333333;
        background-color: #F6F8FA;
        border-radius: 50%;
    }
    .name{
        font-family: 'PingFangSC-Regular';
        color:#3333337b;
        font-size: .22rem;
        margin-left: .1rem;
    }
    .heart{
        display: flex;
        align-items: center;
    }
    .heartImg{
        background-image: url(../assets/img/tab+logo@2x/heart.png);
        width: .4rem;
        height: .4rem;
        background-position: center;
        background-size: contain;
        opacity: 0.4;
    }
    .heartFillImg{
        width: .4rem;
        height: .4rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/tab+logo@2x/heart-fill.png);
    }
    .num{
        font-family: 'PingFangSC-Regular';
        color:#3333337b;
        font-size: .26rem;
        margin-left: 3px;
    }
    .backImg{
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
    }
</style>